<template>
	<div id="houtaiIndex">
		<el-container>
  		<el-header height='70px'>
			  <el-row>
				<el-col :span="8" ><div class="grid-content bg-purple" >
					 <img :src="logo" alt="" id="mylogo">
					</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple-light" style="text-align:center">
					<span>前台系统</span>
					</div></el-col>
				<el-col :span="8"><div class="grid-content bg-purple"   style="text-align:right">
					 <router-link to="/personmsg"><el-button round size='mini' >查看个人信息</el-button></router-link>
					 <span id="loginMsg">{{userName}},欢迎你</span>
					 <i class="el-icon-user-solid"></i>
					 <router-link to="/login"><span @click='outlogin' id="exit">退出</span></router-link>
					</div></el-col>
			</el-row>
  		</el-header>
  		<el-container>
    	<el-aside width="200px" :style="{height: screenHeight + 'px'}">
			<el-menu
			router
			:default-active="routerPath"
			class="el-menu-vertical-demo"
			:unique-opened='true'>
			<el-submenu index="1">
			<template slot="title">
			<i class="el-icon-location"></i>
			<span>点菜管理</span>
			</template>
			<el-menu-item index="/toofoods1">点菜系统</el-menu-item>
			</el-submenu>
			<el-submenu index="2">
			<template slot="title">
			<i class="el-icon-location"></i>
			<span>会员管理</span>
			</template>
			<el-menu-item index="/tovip1">新增会员</el-menu-item>
			<el-menu-item index="/tovip2">查询会员</el-menu-item>
			<el-menu-item index="/tovip3">会员充值</el-menu-item>
			</el-submenu>
			<el-submenu index="3">
			<template slot="title">
			<i class="el-icon-location"></i>
			<span>订单管理</span>
			</template>
			<el-menu-item index="/toorder1">即时订单</el-menu-item>
			<el-menu-item index="/toorder2">查询订单</el-menu-item>
			</el-submenu>
			<el-submenu index="4">
			<template slot="title">
			<i class="el-icon-location"></i>
			<span>餐桌管理</span>
			</template>
			<el-menu-item index="/totable1">座位</el-menu-item>
			</el-submenu>
			</el-menu>
    	</el-aside>
    	<el-main>
    		<router-view/>
    	</el-main>
  		</el-container>
		</el-container>
	</div>
</template>
<script>
	import {mapActions} from 'vuex'
	export default{
		name:'index',
		data(){
			return {
				screenHeight: document.body.clientHeight,
				logo:require('../../assets/images/mylogo.png'),
				userName:this.$store.state.login.user.name
			}
		},
		methods:{
			...mapActions(['actOutlogin']),
			outlogin(){
				console.log('hahahahahha')
				this.actOutlogin()
			}
		},
		mounted(){
			const that = this
  			window.onresize = () => {
    		return (() => {
      		window.screenHeight = document.body.clientHeight
       		that.screenHeight = window.screenHeight
   		 	})()
  			}
		},
		watch: {
      		screenHeight (val) {
        		if (!this.timer) {
          			this.screenHeight = val
          			this.timer = true
          			let that = this
          			setTimeout(function () {
            			console.log(that.screenHeight)
            			that.timer = false
          			}, 400)
        		}
      		}
    	},
    	computed:{
    		routerPath(){
    			let path = ''
    			if(this.$route.path==='/index1'){
    				path = '/toofoods1'
    			}else{
    				path = this.$route.path
    			}
    			return path
    		}
    	}
	}
</script>
<style scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    /* text-align: center; */
    line-height: 70px;
    /*高度在标签内设置的*/
	margin: 0;
	padding: 0;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }
  #mylogo{
	  height: 70px;
	  width: 200px;
  }
  #exit{
	  margin: 0 15px;
  }
  a{
	  text-decoration: none;
  }
  #loginMsg{
 	margin: 0 15px;
  }
</style>